<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #sign-box{

        }
        #sign{
            /* resize:框的大小是否可调节 */
            resize: none;
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <!-- label标签，一般和input结合使用，对input起提示作用，
    for属性需要填写对应的input的id值，这样点击lable就相当于点击input -->
    <label for="username">用户名</label>
    <!-- type=text表示输入框，可以输入文本，设计行内块元素 
    placeholder占位符，内容为空时显示，当用户输入时消失
    autocomplete自动提示，当值为off时关闭自动提示，当值为on时开启，默认为on-->
    <input type="text" id="username" placeholder="请输入账号" autocomplete="off">
    <br>
    <label for="psw">密码：</label>  
    <!-- type=password 是密文状态，无法被复制 -->
    <input type="password" id="psw" placeholder="请输入密码">  
    <br>
    <!-- type=number只能填入数字 -->
    <p>性别：</p>
    <!-- radio单选框 多个单选框name设置一样时，这些单选框为一组，
        同一组单选框只能选择一个 -->
    <label for="male">男</label>
    <input type="radio" id="male" name="gender">
    <label for="female">女</label>
    <input type="radio" id="female" name="gender">
    <label for="unkonwn">未知</label>
    <input type="radio" id="unknown" name="gender">
    <br>
    <p>爱好：</p>
    <!-- checkbox复选框，可以选择0个或多个 -->
    <label for="">吃饭</label>
    <input type="checkbox" name="aihao" id="chi">
    <label for="">睡觉</label>
    <input type="checkbox" name="aihao" id="shui">
    <label for="">游戏</label>
    <input type="checkbox" name="aihao" id="you">
    <br>
    <!-- select下拉列表行内块元素 
    option 下拉列表中的选项
    value属性如果不赋值,那么返回option的内容;被赋值,选中返回是value值-->
    <label for="what">下午做什么：</label>
    <select id="what">
        <option value="">睡觉</option>
        <option value="">游戏</option>
        <option value="">洗澡</option>
        <option value="">台球</option>
    </select>
    <div id="sign-box">
        <label for="">个性签名:</label><br>
        <textarea id="sign" ></textarea>
    </div>
    <button>按钮</button>
</body>

</html>